<template>
	<ReturnPage></ReturnPage>
	<view class="content">
		<view class="btn-box">
			<view v-for="btn in props.buttons" :key="btn.text" class="btn" @click="btn.click">
				<view class="btn-wrapper">
					<image :src="btn.icon" mode="widthFix" class="btn-img"></image>
					<text class="btn-text">{{btn.text}}</text>
				</view>
			</view>
		</view>
		<view class="panel-box">
			<FormPanel title="赛程模式列表" :description="`共${props.data.length}个赛事`" :btns="props.data.length === 0 ? [] : props.formBtns">
				<view class="modol-box">
					<view v-if="props.loading" class="loading-container">
					  <view class="loading-spinner"></view>
					  <text>加载中...</text>
					</view>
					<view v-if="props.data.length === 0" class="empty-state">
					  <text>暂无赛程模式</text>
					</view>
					<swiper v-else class="swiper" :class="{'scroll-swiper': hasScroll}" :autoplay="false" :vertical="true" style="height: 100%;" :current="props.currentModelIndex" @change="onSwiperChange">
						<swiper-item v-for="model in props.data" :key="model.id" class="model">
							<view class="model-title">{{model.matchScheduleModelName}}</view>
							<view class="model-form">
								<view v-for="formItem in props.formItems" class="form-item">
									<view class="form-item-label">{{formItem.label}}：</view>
									<text class="form-item-text">{{ typeof formItem.format === 'function' ? formItem.format(model[formItem.key]) : model[formItem.key] }}</text>
								</view>
							</view>
						</swiper-item>
					</swiper>
					<SwiperScrollbar v-if="hasScroll" :index="props.currentModelIndex" :length="props.data.length" ></SwiperScrollbar>
				</view>
			</FormPanel>
		</view>
	</view>
</template>

<script setup>
import ReturnPage from '@/components/ReturnPage.vue'
import FormPanel from '@/components/FormPanel.vue'
import { ref, computed } from 'vue'
import SwiperScrollbar from '@/components/SwiperScrollbar.vue'

const props = defineProps(['data', 'formItems', 'loading', 'currentModelIndex', 'setCurrentModelIndex', 'formBtns', 'buttons']) 

const onSwiperChange = ({ detail }) => {
	props.setCurrentModelIndex(detail.current)
}

const hasScroll = computed(() => {
	return props.data.length > 1
})

</script>

<style scoped lang="scss">
.content {
	padding: 12rpx 50rpx 18rpx 50rpx;
	height: calc(100vh - 38rpx);
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	justify-content: space-between;
	font-family: Source Han Sans CN, Source Han Sans CN;
}
.btn-box {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
}
.btn {
	position: relative;
	margin-bottom: 12rpx;
	.btn-wrapper {
		width: 118rpx;
		height: 90rpx;
	}
	.btn-img {
		height: 100%;
		width: 100%;
	}
	.btn-text {
		position: absolute;
		bottom: 11rpx;
		left: 50%;
		transform: translateX(-50%);
		white-space: nowrap;
		font-family: YouSheBiaoTiHei-Regular;
		font-weight: 400;
		color: #FFFFFF;
		font-size: 16rpx;
	}
}
.panel-box {
	height: 100%;
	width: auto;
	flex-grow: 1;
	margin-left: 26rpx;
}
.modol-box {
	width: 100%;
	height: 100%;
	overflow: auto;
	position: relative;
	.model {
		padding: 10rpx 8rpx;
		line-height: 24rpx;
		height: 100%;
		box-sizing: border-box;
		background-color: #F0F0E4;
		border-radius: 6rpx;
		.model-title {
			width: 100%;
			font-weight: bold;
			font-size: 13rpx;
			color: #384A58;
			text-indent: 14rpx;
		}
		.model-form {
			display: flex;
			flex-wrap: wrap;
			font-weight: 400;
			font-size: 13rpx;
			.form-item {
				min-width: 50%;
				display: flex;
			}
			.form-item-label {
				color: #99A1A4;
				width: 68rpx;
				text-align: right;
			}
			.form-item-text {
				color: #4A5971;
			}
		}
	}
}
.scroll-swiper {
	width: calc(100% - 16rpx);
}

.loading-container, .empty-state {
	text-align: center;
	color: #999;
	padding: 50rpx;
}
.loading-spinner {
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid #f3f3f3;
  border-top: 4rpx solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20rpx;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

</style>